<template>
  <div>
    <a-modal
      :title="title"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :width="800"
      destroyOnClose
    >
      <a-table
        :columns="columns"
        :data-source="[records]"
        bordered
        :pagination="false"
        style="margin-top: 20px"
      >
      </a-table>
      <a-form
        style="margin-top: 20px"
        :label-col="{ span: 3 }"
        :wrapper-col="{ span: 10 }"
        :form="form"
      >
        <a-form-item label="配送方式：">
          <span>{{ records.goodsDistribution | filterDistribution }}</span>
        </a-form-item>
        <a-form-item label="收货人：">
          <span>{{ records.userName }} {{ records.userPhone }}</span>
        </a-form-item>
        <a-form-item label="收货地址：">
          <span
            >{{ records.provinceName }}{{ records.cityName
            }}{{ records.districtName }}{{ records.detailAddress }}</span
          >
        </a-form-item>
        <a-form-item label="快递公司">
          <a-select
            :options="expressList"
            placeholder="请选择"
            v-decorator="['expressCompanyId',{ rules: [{ required: true, message: '请选择快递公司' }] },]"
            @change="handleChangeQuotationAttr"
          ></a-select>
        </a-form-item>

        <a-form-item label="快递单号" v-if="currentExpressCompanyId != '' && currentExpressCompanyId != '0'">
          <a-input
            style="margin-top: 10px"
            v-decorator="['expressTrackNumber',{ rules: [{ required: true, message: '请输入快递单号' }] },]"
            placeholder="请输入快递单号"
          >
          </a-input>
          <!-- <a-button style="display:flex;" type="link" @click="addCourierNumber"
            >新增单号</a-button
          > -->
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      expressList: [], // 快递公司
      form: this.$form.createForm(this, { name: "submit" }),
      visible: false,
      confirmLoading: false,
      fileList: [],
      express: "",
      courierNumber: [{ value: "" }],
      formData: {
        express: "",
        courierNumber: [],
      },
      data: [],
      currentExpressCompanyId: '',
      columns: [
        {
          title: "商品",
          dataIndex: "name",
          key: "name",
          customRender: (text, row) => {
            let img = row.goodsImg ? row.goodsImg.split(",")[0] : "";
            let obj = {}
            if(row.productType == 3) {
              obj = {
                children: (
                  <div class="table-goods">
                    <table-img class="goods_img" src={img} />
                    <div class="rc-goods-cell-right">
                      <div class="rc-goods-cell-name">
                        <a href="javascript:;;" class="rc-blank-link" rel="noopener noreferrer">
                          {row.goodsName}
                        </a>
                      </div>
                      <div class="rc-goods-cell-info rc-goods-cell-info-spec">
                        {row.skuName}
                      </div>
                      <div class="rc-goods-cell-info rc-goods-cell-info-no">
                        {row.goodsCode}
                      </div>
                      <div class="rc-goods-cell-info rc-goods-cell-info-no">
                        {row.giftName}
                      </div>
                      <div v-show={row.givingName} class="rc-goods-cell-info rc-goods-cell-info-no">
                        {row.givingName}
                      </div>
                    </div>
                  </div>
                ),
                attrs: {},
              }
            } else {
              obj = {
                children: (
                  <div class="table-goods">
                    <table-img class="goods_img" src={img} />
                    <div class="rc-goods-cell-right">
                      <div class="rc-goods-cell-name">
                        <a href="javascript:;;" class="rc-blank-link" rel="noopener noreferrer">
                          {row.goodsName}
                        </a>
                      </div>
                      <div class="rc-goods-cell-info rc-goods-cell-info-spec">
                        {row.skuName}
                      </div>
                      <div class="rc-goods-cell-info rc-goods-cell-info-no">
                        {row.goodsCode}
                      </div>
                      <div v-show={row.givingName} class="rc-goods-cell-info rc-goods-cell-info-no">
                        {row.givingName}
                      </div>
                    </div>
                  </div>
                ),
                attrs: {},
              }
            }

            return obj;
          },
        },
        {
          title: "单价（元）/数量",
          dataIndex: "moneyAndNum",
          key: "moneyAndNum",
          customRender: (text, row) => {
            const obj = {
              children: (
                <div class="table_item">
                  <span class="item-price">
                    {(+row.goodsPrice / 100).toFixed(2)}
                  </span>
                  <span class="item-unit">{row.goodsNum}件</span>
                </div>
              ),
              attrs: {},
            };

            return obj;
          },
        },
        {
          title: "发货状态",
          dataIndex: "orderGoodsSendStatus",
          key: "orderGoodsSendStatus",
          customRender: (text, row) => {
            if (text == 1) {
              return "已发货";
            }
            return "未发货";
          },
        },
        {
          title: "实付",
          dataIndex: "realPrice",
          key: "realPrice",
          customRender: (text, row) => {
            if (!row.goodsOrderPrice) return "0.00";
            return `${(+row.goodsOrderPrice / 100).toFixed(2)}`;
          },
        },
      ],
    };
  },
  props: {
    value: {
      require: true,
      default: false,
      type: Boolean,
    },
    title: {
      default: "发货信息",
      type: String,
    },
    records: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  filters: {
    filterDistribution(val) {
      if (val == 1) {
        return "定点自提";
      } else if (val == 2) {
        return "物流配送";
      }
      return "物流配送";
    },
  },
  mounted() {
    this.form = this.$form.createForm(this, { name: "coordinated" });
  },
  watch: {
    value(val) {
      console.log(val);
      this.visible = val;
    },
    visible(val) {
      if (val && this.records.id) {
        this.getExpressCompanyList();
      }
      this.$emit("input", val);
    },
  },
  methods: {
    getExpressCompanyList() {
      let url = "/express/company/list";
      this.$get(url).then((res) => {
        if (res && res.returnCode === 1000) {
          console.log(res, "快递公司");
          this.expressList = res.dataInfo.map((item) => {
            return {
              label: item.expressCompanyName,
              value: item.id,
            };
          });
          this.expressList.unshift({ label: '无需物流', value: '0' })
        }
      });
    },

    handleChangeQuotationAttr(val) {
      this.currentExpressCompanyId = val
    },
    addCourierNumber() {
      let list = {
        value: "",
      };
      this.courierNumber.push(list);
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.confirmLoading = true;
      this.form.validateFields((err, values) => {
        if (!err) {
          let url = "/order/delivery";
          console.log(values);
          this.$post(url, { orderGoodsId: this.records.id, ...values }).then(
            (res) => {
              if (res && res.returnCode === 1000) {
                this.$message.success("发货成功！");
                this.$emit("handleSubmit");
              }
            }
          );
        }
      });
      this.confirmLoading = false;
    },
    handleCancel(e) {
      this.form.resetFields();
      this.visible = false;
    },
    handleChange(info) {
      this.fileList = [info];
    },
  },
};
</script>


<style rel='stylesheet/less' lang='less' scoped>
/deep/.ant-form-item {
  margin-bottom: 0;
}
.table-goods {
  // max-width: 200px;
  min-width: 100px;
  display: flex;
  .goods_img {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
  }
  .rc-goods-cell-right {
    flex-grow: 1;
    padding: 4px 0;
    .rc-goods-cell-name {
      color: #323232;
      font-size: 14px;
      line-height: 18px;
      word-break: break-all;
    }
    .rc-goods-cell-info {
      margin-top: 2px;
      word-break: break-all;
      font-size: 12px;
      color: #969799;
    }
  }
}

.table_item {
  .item-price {
    display: block;
  }
  .item-unit {
    display: block;
  }
}
</style>
